<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<button class="ms-Button js-togglePanel">
  <span class="ms-Button-label">Open panel</span>
</button>

<div class="ms-Panel ms-Panel--extraLarge">
  <div class="ms-Overlay ms-Overlay--dark js-togglePanel"></div>
  <div class="ms-Panel-main">
    <div class="ms-Panel-commands">
        <div class="ms-CommandBar">
            <div class="ms-CommandBar-sideCommands">
                <div class="ms-CommandBarItem icon-only">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ms-CommandBar-mainArea">
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--star"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--onedriveAdd"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Documents</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--flag"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Flags</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--smiley"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Smiley</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--officeStore"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Office Store</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <div class="ms-CommandBarItem">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--lync"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Lync</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                </div>
                <!-- Overflow Command -->
                <div class="ms-CommandBarItem icon-only ms-CommandBarItem-overflow">
                    <div class="ms-CommandBarItem-linkWrapper">
                        <div class="ms-CommandBarItem-link">
                            <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--ellipsis"></span>
                            <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Ellipsis</span>
                            <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                        </div>
                    </div>
                    <ul class="ms-CommandBar-overflowMenu ms-ContextualMenu"></ul>
                </div>
                <!-- End Overflow Command -->
            </div>
        </div>
    </div>
    <div class="ms-Panel-contentInner">
      <span class="ms-Panel-headerText">Panel</span>
      <p class="ms-font-m">Content goes here.</p>
    </div>
  </div>
</div>
